import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {
  createMuiTheme,
  MuiThemeProvider,
  withStyles
} from '@material-ui/core/styles'
import { Button, Grid } from '@material-ui/core'
import kscreenshot from 'kscreenshot'
import { requestFullScreen } from './tools'

const theme = createMuiTheme({
  typography: {
    useNextVariants: true
  }
})

const styles = theme => ({})

let K = null

class ScreenHot extends Component {
  state = {
    image: ''
  }

  toScreen() {
    K.startScreenShot()
  }

  componentDidMount() {
    this.screenInit()
  }
  screenInit = () => {
    let that = this
    K = new kscreenshot({
      // key: 65,
      scale: 1,
      endCB(res) {
        that.setState({
          image: res
        })
      }
    })
  }

  fullScreen = () => {
    requestFullScreen(document.documentElement)
  }
  render() {
    // const { classes } = this.props

    return (
      <MuiThemeProvider theme={theme}>
        <Grid container spacing={24}>
          <Grid item xs={12}>
            <h1>ScreenHot</h1>
            <Button
              variant="contained"
              color="primary"
              onClick={this.toScreen.bind(this)}
            >
              屏幕截图
            </Button>
            <Button onClick={this.fullScreen}>全屏</Button>
          </Grid>
          <Grid item xs={12}>
            <img src={this.state.image} alt="screenhot" />
          </Grid>
        </Grid>
      </MuiThemeProvider>
    )
  }
}

ScreenHot.propTypes = {
  classes: PropTypes.object.isRequired
}

export default withStyles(styles)(ScreenHot)
